<template>
  <div class="home-cantainer" ref="center_container">
    <el-row :gutter="24" class="leftAndRight">
      <!-- 左侧 -->
      <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
        <div class="grid-content bg-purple">
          <!-- 文章精选 -->
          <div class="cardColor vip-container">
            <div slot="header" class="clearfix vip-head">
              <span>文章精选</span>
            </div>
            <div  class="vip-body">
              <el-row :gutter="24" class="myrow">
                <div v-for="bl in vipblogs" :key="bl.id"  @click="goArticle(bl.id)" >
                  <el-col class="mycol" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
                  <div class="blog_vip">
                    <div class="left">
                      <div class="img-container">
                        <img :src="bl.blogface" alt="">
                      </div>
                    </div>
                    <div class="right">
                      <div class="rightTitle">{{ bl.title }}</div>
                      <div v-html="bl.introduction" class="rightContent"></div>
                      <div class="date">{{ bl.create_time.slice(0,10) }}</div>
                    </div>
                  </div>
                </el-col>
                </div>
              </el-row>
            </div>
          </div>
          <!-- 今日热搜 -->
          <el-card class="cardColor">
            <div slot="header" class="clearfix">
              <span>今日热搜</span>
              <a style="float: right; font-size:14px; color:var(--font_2) " type="text">查看更多</a>
            </div>
            <div>
              暂无
            </div>
          </el-card>
          <!-- 文章日历 -->
          <el-card class="cardColor">
            <div slot="header" class="clearfix">
              <span>文章日历</span>
            </div>
            <div class="text item">
              <Calendar></Calendar>
            </div>
          </el-card>
          <!-- 博客文章 -->
          <div class="blogArticle">
            <div slot="header" class="articleTitle clearfix">
              <span>博客文章</span>
            </div>
            <div class="articleBody">
              <ul>
                <li  class="articleContent" v-for="(b) in blogsArr" :key="b.id" @click="goArticle(b.id)">
                  <div class="left" >
                    <div class="img-container">
                      <img :src="b.blogface" alt="">
                    </div>
                  </div>
                  <div class="right">
                    <div class="rightTitle">{{b.title}}</div >
                    <div v-html="b.content" class="rightContent"></div>
                    <div class="blogInfo">
                      <span>{{ b.create_time.slice(0,10) }}</span>
                    </div>
                  </div>
                </li>
                <li>
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage1"
                    :page-sizes="pageSizeArr"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                  </el-pagination>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </el-col>
      <!-- 右侧 -->
      <el-col class="hidden-md-and-down" :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
        <div class="grid-content bg-purple">
          <!-- 独家广告 -->
          <el-card class="cardColor">
            <div slot="header" class="clearfix">
              <span>独家广告</span>
            </div>
            <div class="adList">
              <Swiper :carouselList="adList"></Swiper>
            </div>
          </el-card>
          <!-- 个人名片 -->
          <el-card class="cardColor">
            <div slot="header" class="clearfix">
              <span>个人名片</span>
            </div>
            <div class="myInfo">
              <!-- 二维码 -->
              <div class="ewm clearfix">
                <div class="myTitle">
                  <p>个人名片</p>
                  <p>MY</p>
                  <P>PROFILE</P>
                </div>
                <img class="ewmImg" src="../../../../assets/imgs/footer/qqewm.jpg" alt />
              </div>
              <!-- 图片 -->
              <img class="adImg" src="http://localhost:3000/adImgs/1676195582127.png" alt />
              <!-- 介绍 -->
              <div class="introduce">
                <p>
                  NAME
                  <span>忧郁火龙果</span>
                </p>
                <p>
                  JOB
                  <span>前端程序员</span>
                </p>
                <p>
                  ADDR
                  <span>四川资阳</span>
                </p>
                <p>
                  WEB
                  <a href="ziyangkeji">www.ziyangkeji.com</a>
                </p>
              </div>
            </div>
          </el-card>
          <!-- 标签云 -->
          <el-card class="cardColor">
            <div slot="header" class="clearfix">
              <span>标签云</span>
            </div>
            <div>
              <ul class="csdnlink clearfix">
                <li> <a href="">Html</a> <i class="el-icon-paperclip" style="color:#02afff"></i></li>
                <li> <a href="">Css</a> <i class="el-icon-paperclip" style="color:#02afff"></i></li>
                <li> <a href="">Javascript</a> <i class="el-icon-paperclip" style="color:#02afff"></i></li>
                <li> <a href="">Vue</a> <i class="el-icon-paperclip" style="color:#02afff"></i></li>
                <li> <a href="">Node</a> <i class="el-icon-paperclip" style="color:#02afff"></i></li>
                <li> <a href="">Koa</a> <i class="el-icon-paperclip" style="color:#02afff"></i></li>
                <li> <a href="">Ajax</a><i class="el-icon-paperclip" style="color:#02afff"></i></li>
                <li> <a href="">Promise</a><i class="el-icon-paperclip" style="color:#02afff"></i></li>
                <li> <a href="">Linux</a><i class="el-icon-paperclip" style="color:#02afff"></i></li>
              </ul>
            </div>
          </el-card>
          <!-- 站点信息 -->
          <el-card class="cardColor">
            <div slot="header" class="clearfix">
              <span>站点信息</span>
            </div>
            <div class="webinfo">
              <li>
                建站时间：
                <span>2022年6月16日</span>
              </li>
              <li>
                网站技术栈：
                <span>Vue + Koa + elementUI</span>
              </li>
              <li>
                网站版本：
                <span>2.0.0</span>
              </li>
              <li>
                文章总数：
                <span>{{ }}</span>
              </li>
              <li>
                总访问量：
                <span>{{ }}</span>
              </li>
              <li>
                网站空间：
                <span>腾讯云服务器</span>
              </li>
            </div>
          </el-card>
          <!-- 意见反馈 -->
          <el-card class="cardColor">
            <div slot="header" class="clearfix">
              <span>意见反馈</span>
            </div>
            <div class="advise">
              <el-form
                :model="adviseForm"
                :rules="adviseFormRules"
                ref="adviseForm"
                label-width="100px"
                class="demo-ruleForm"
              >
                <el-form-item prop="email">
                  <el-input class="email" v-model="adviseForm.email" placeholder="请输入用于接收反馈的邮箱"></el-input>
                </el-form-item>
                <el-form-item prop="content">
                  <el-input
                    class="email"
                    type="textarea"
                    v-model="adviseForm.content"
                    placeholder="请输入你对网站的建议"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                    style="width:100%"
                    type="primary"
                    @click="submitAdvise('adviseForm')"
                  >立即创建</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
          <!-- 友情链接 -->
          <el-card class="cardColor">
            <div slot="header" class="clearfix">
              <span>友情链接</span>
              <el-button type="success" size="mini" style="float: right;">申请链接</el-button>
            </div>
            <div class="kindlink clearfix">
              <ul>
                <li>快乐程序员</li>
                <li>枫枫知道</li>
                <li>忧郁火龙果</li>
                <li>资阳科技</li>
              </ul>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getAdsApi } from "@/api/ad";
import { mapState, mapActions } from "vuex";
import  Calendar  from "@/components/Calendar.vue";
export default {
  name: "myHome",
  components: {
    Calendar
  },
  data() {
    return {
      currentIndex: 0,
      
      adList: "",
      // 建议表单
      adviseForm: {
        email: "",
        content: ""
      },
      // 建议表单规则
      adviseFormRules: {
        email: [
          { required: true, message: "请输入接收回复邮箱", trigger: "change" },
          { min: 14, max: 18, message: "请输入正确的邮箱格式", trigger: "blur" }
        ],
        content: [
          { required: true, message: "请填写活动形式", trigger: "change" },
          { min: 1, max: 50, message: "最多填写50个字符", trigger: "blur" }
        ]
      },
      // 分页
      currentPage1: 1,
      pageSizeArr:[5,10,20],
      pageSize:5
    };
  },
  mounted() {
    // 1.响应式内边距
    this.listenWidth();
    // 监听浏览器窗口变化
    window.onresize = () => {
      let w = document.body.clientWidth;
      if (w < 600) {
        return (() => {
          this.$refs["center_container"].style.padding = "10px";
        })();
      } else {
        return (() => {
          this.$refs["center_container"].style.padding = ".6rem 5rem .6rem 5em";
        })();
      }
    };
    // 2.获取广告图
    const data = { pageSize: "", pageNum: "" };
    this.getAd(data);
    this.vuexGetBlogs(data);
    this.vuexGetVipBlogs(data)
  },
  methods: {
    // 1.响应式内边距
    listenWidth() {
      let w = document.body.clientWidth;
      if (w < 500) {
        return (() => {
          this.$refs["center_container"].style.padding = "10px";
        })();
      } else {
        return (() => {
          this.$refs["center_container"].style.padding = "0.6rem 7.5rem 0.6rem 7.5rem ";
        })();
      }
    },
    // 2.获取广告图
    async getAd(data) {
      await getAdsApi(data).then(res => {
        this.adList = res.data.ads;
      });
    },
    // 3.提交反馈
    submitAdvise(adviseForm) {
      this.$refs[adviseForm].validate(valid => {
        if (valid) {
          this.$message({
            type:'error',
            message:'功能暂未开发'
          })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 4.获取博客数据
    ...mapActions({
      vuexGetBlogs: "Blogs/vuexGetBlogs",
      vuexGetVipBlogs: "Blogs/vuexGetVipBlogs"
    }),
    // 5.分页
    handleSizeChange(val) {
        this.pageSize = val
        const data = {pageSize:this.pageSize,pageNum:this.currentPage1}
        this.vuexGetBlogs(data);
      },
      handleCurrentChange(val) {
        this.currentPage1 = val
        const data = {pageSize:this.pageSize,pageNum:this.currentPage1}
        this.vuexGetBlogs(data);
      },
      // 展示博客
      goArticle(blog_id){
        this.$router.push({      
            path: `/dispalyarticle/${blog_id}`
          });
      }
  },
  computed: {
    ...mapState({
      blogsArr: state => state.Blogs.blogs,
      total:state=>state.Blogs.total,
      vipblogs:state => state.Blogs.vipblogs
    })
  }
};
</script>
<style lang="less" scoped>
.home-cantainer {
  padding: 0.6rem 7.5rem 0.6rem 7.5rem ;
  background-color: var(--bgColor);
  .leftAndRight {
    font-size: 18px;
      // 文章精选
      .vip-container{
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
        border-radius: 5px 5px 5px 5px;
        .vip-head{
          height: 61px;
          border-bottom: 1px solid var(--cardLine);
          padding: 18px 20px 18px 20px;
          background-color: var(--cardColor);
          color: var(--font_2);
          
          span {
            font-weight: bold;
          }
        }
        .vip-body{
          .mycol{
            padding: 0% !important;
          }
          .myrow{
            margin: 0% !important;
          }
          .blog_vip:nth-child(odd){
            border-right:1px solid var(--cardLine);
          }
          .blog_vip:nth-child(even){
            border-left:1px solid var(--cardLine);
          }
      .blog_vip {
        cursor: pointer;
        height: 110px;
        display: flex;
        justify-content: space-around;
        border-bottom: 1px solid var(--cardLine);
        .left{
          width: 40%;
          padding: 10px;
          .img-container{
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            border-radius: 5px;
            img{
              width: auto;
              height: auto;
              //如果图片比例不为一比一 则可以适当增加比例以满足充满盒子
              max-width: 180%;
              max-height: 180%;
              transition:  all .3s;
            }
            img:hover{
              transform: scale(1.2,1.2);
            }
          }
        }
        .right{
          width: 60%;
          padding: 10px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          .rightTitle{
          width: 100%;
          font-weight: bold;
          overflow:hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow:ellipsis;
          font-size: 18px;

          }
          .rightContent{
            width: 100%;
            overflow:hidden;
            font-size: 16px;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            text-indent:2em;
          }
          .date{
            font-size: 16px;
          }
        }
      }
        }
      }
     
    
  }
  .cardColor {
    background-color: var(--cardColor);
    border: none;
    color: var(--font_2);
    margin-bottom: 20px;
    span {
      font-weight: bold;
    }
  }
  ::v-deep .el-card__header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--cardLine);
    box-sizing: border-box;
  }
  // 博客文章
  .blogArticle{
    .articleTitle{
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
      height: 61px;
      border-bottom: 1px solid var(--cardLine);
      padding: 18px 20px 18px 20px;
      background-color: var(--cardColor);
      color: var(--font_2);
      border-radius: 5px 5px 0px 0px;
      span {
        font-weight: bold;
      }
    }
    .articleBody{
      background: none;
      color: var(--font_2);
      li:nth-child(1){
        border-radius: 0px 0px 5px 5px ;
      }
      li:nth-last-child(1){
        height: auto;
        background-color: var(--bgColor);
        box-shadow: none;
      }
       li:nth-last-child(1):hover{
        transform: none;
      }
      li{
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
        background-color: var(--cardColor);
        height: 150px;
        width: 100%;
        display: flex;
        margin-bottom: 20px;
        border-radius: 5px;
        transition: all 0.3s;
        position: relative;
        overflow: hidden;
        padding: 18px;
        justify-content: space-around;
        .left{
          width: 40%;
          .img-container{
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            border-radius: 5px;
            img{
              width: 100%;
              height: auto;
              //如果图片比例不为一比一 则可以适当增加比例以满足充满盒子
              max-width: 180%;
              max-height: 180%;
              transition:  all .3s;
            }
            img:hover{
              transform: scale(1.2,1.2);
            }
          }
        }
        .right{
          padding-left: 18px;
          width: 60%;
          .rightTitle{
          width: 100%;
          font-weight: bold;
          overflow:hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow:ellipsis;
          font-size: 22px;
          margin-bottom: 6px;
          }
          .rightContent{
            width: 100%;
            overflow:hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            margin-bottom: 12px;
            text-indent:2em;
          }
        }
      }
      li:nth-child(1):hover{
        transform: none;
      }
      li:hover{
        transform: translateY(-10px);
      }
    }
  }
  //   广告图
  .adList {
    width: 100%;
    height: auto;
    padding: 0%;
  }
  //  个人名片
  .myInfo {
    .ewm {
      p {
        margin: 0%;
        margin-bottom: 20px;
      }
      .myTitle {
        float: left;
        font-weight: bold;
        font-size: 24px;
        p:nth-child(1) {
          color: #dd6161;
        }
        p:nth-child(2) {
          color: #e0bb53;
          letter-spacing: 8px;
          font-style: oblique;
        }
        p:nth-child(3) {
          color: #e0bb53;
          letter-spacing: 8px;
          font-style: oblique;
        }
      }
      .ewmImg {
        width: 100px;
        height: 100px;
        float: right;
      }
    }
    // 图片s
    .adImg {
      width: 100%;
    }
    .adImg:hover {
      transform: scale(1.04, 1.04);
      transition: all 0.3s;
    }
    // 介绍
    .introduce {
      p {
        color: #dd6161;
        span {
          color: var(--font_2);
        }
        a {
          color: rgb(2, 175, 255);
        }
      }
    }
  }
  // 标签云
  .csdnlink{
    a{
      color: var(--font_2);
    }
    li{
      width: 50%;
      float: left;
    }
  }

  // 网站信息
  .webinfo {
    li {
      font-weight: bold;
      margin-bottom: 20px;
      span {
        font-weight: normal;
      }
    }
  }
  // 意见反馈
  .advise {
    ::v-deep .el-form-item__content {
      line-height: 40px;
      position: relative;
      font-size: 14px;
      margin: 0px !important;
    }
    ::v-deep .el-textarea__inner {
      background-color: var(--bgColor);
      height: 120px;
      color: var(--font_2);
      border: 1px solid var(--cardLine);
    }
    ::v-deep .el-input__inner {
      background-color: var(--bgColor);
      color: var(--font_2);
      border: 1px solid var(--cardLine);
    }
    .email {
      border: 1px solid var(--bgColor);
    }
    ::v-deep .el-input__inner:hover,
    ::v-deep .el-textarea__inner:hover {
      border: 1px solid var(--borderColor);
    }
    ::v-deep .el-form-item.is-error .el-textarea__inner {
      border-color: #f56c6c;
    }
    ::v-deep .el-form-item.is-error .el-input__inner {
      border-color: #f56c6c;
    }
  }
  // 友情链接
  .kindlink {
    li {
      width: 50%;
      float: left;
      margin-bottom: 20px;
    }
  }
}
</style>
<style scoped>

</style>